<script lang="ts" setup>
import { reactive, ref, onActivated, onMounted } from 'vue'
import { FormInstance } from 'element-plus'
import { useTable } from '@/hooks/useTable'
import { queryBoxEmployeeOperation } from '@/api/cabinet'
import { queryBoxEmployeeOperationTableCol } from '@/api/cabinet/types/cabinet'
import { getToken } from '@/utils/cache/cookies'
import { useRoute } from 'vue-router'
import { formatterPower } from '@/utils/formatter'

const route = useRoute()
const form = reactive({
  type: '',
  boxCode: route.query.boxCode as string,
  phone: ''
})
const formRef = ref<FormInstance | null>(null)
const { data, loading, load, pagination, handleCurrentChange, handleSizeChange, setCurrentPage } =
  useTable<queryBoxEmployeeOperationTableCol>(
    queryBoxEmployeeOperation,
    getToken() ?? '',
    () => form
  )
onMounted(() => {
  load()
})
onActivated(() => {
  form.boxCode = (route.query.boxCode as string) || ''
})
const handleFormSearch = () => {
  setCurrentPage(1)

  load()
}
const reset = () => {
  formRef.value?.resetFields()
}
defineExpose({ load })
</script>

<template>
  <el-form inline ref="formRef" :model="form">
    <el-form-item label="电柜编号" prop="boxCode">
      <el-input v-model="form.boxCode" placeholder="请输入电柜编号" />
    </el-form-item>
    <el-form-item label="手机号" prop="phone">
      <el-input v-model="form.phone" placeholder="请输入手机号" />
    </el-form-item>
    <el-form-item label="操作内容" prop="type">
      <el-select v-model="form.type" style="width: 120px">
        <el-option label="不限" value="" />
        <el-option value="开启主控仓门" />
        <el-option value="关闭主控仓门" />
        <el-option value="打开仓门" />
        <el-option value="关闭仓门" />
        <el-option value="设置维修" />
        <el-option value="解除维修" />
        <el-option value="开电柜锁" />
        <el-option value="关电柜锁" />
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="handleFormSearch">查询</el-button>
      <el-button plain @click="reset">重置</el-button>
    </el-form-item>
  </el-form>
  <el-table :data="data" v-loading="loading" class="no-border">
    <el-table-column prop="boxCode" label="电柜编号" align="center" />
    <el-table-column prop="operationUser" label="操作人" align="center" />
    <el-table-column prop="remark" label="操作内容" align="center" />
    <!-- <el-table-column prop="" label="操作位置" align="center" /> -->
    <!-- <el-table-column prop="createdTime" label="操作完成时间" sortable align="center" /> -->
    <el-table-column
      prop="masterBatteryLevel"
      label="主控电量"
      sortable
      align="center"
      :formatter="formatterPower"
    />
  </el-table>
  <div flex justify-end mt-20>
    <el-pagination
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
      v-model:current-page="pagination.pageNum"
      v-model:page-size="pagination.pageSize"
      background
      :total="pagination.total"
      layout="total,prev,pager,next,jumper,sizes"
    />
  </div>
</template>

<style scoped></style>
